import {Form, Slider, DatePicker ,Space, Spin, message, TreeSelect, Button,Table, Tabs, Switch} from "antd";
import styles from './index.less'
import '@umijs/max';
import gcoord from 'gcoord'
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);
import Map from '@/components/Map';
import {PageContainer} from '@ant-design/pro-components';
import React, {useMemo, useRef, useState} from 'react';
import {TableOutlined} from "@ant-design/icons";

const FenceMgr = () => {
  const map = useRef(null);
  const AMap = useRef(null);
  const [loading, setLoading] = useState(false);

  const [rectangle, setRectangle] = useState(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [startPoint, setStartPoint] = useState(null);

  const [form] = Form.useForm();

  const onMapLoaded = (_map, _AMap) => {
    map.current = _map
    AMap.current = _AMap
    
  };

  const startDrawing = () => {
    setIsDrawing(true);
    message.info("请在地图上拖动鼠标绘制矩形!");
    const mouseTool = new AMap.current.MouseTool(map.current);
    mouseTool.rectangle({
      strokeColor: '#1890ff',
      fillColor: '#1890ff',
      fillOpacity: '0.2'
    });
    
    mouseTool.on('draw', (e) => {
      const {obj: rect} = e;
      setRectangle(rect);
      setIsDrawing(false);
      mouseTool.close();
    });
  };

  const getRectangleBounds = () => {
    const bounds = rectangle.getBounds();
    console.log("矩形坐标范围:", bounds);
    message.info(`矩形坐标: ${bounds.getSouthWest()}, ${bounds.getNorthEast()}`);
  }

  return (
    
    <PageContainer className={styles.pageContainer}>
      <Spin spinning={loading}>
      <div className={styles.container}>
        <div className={styles.topInfos}>
          <Form form={form}>
            <Space>
            <Form.Item>
              <Button type="primary" onClick={startDrawing}>矩形</Button>
              <Button type="primary" onClick={getRectangleBounds}>获取数据</Button>
            </Form.Item>
          </Space>
        </Form>
        </div>

        <div className={styles.mapWrap}>
          <Map onMapLoaded={onMapLoaded}></Map>
        </div>
      </div>
      </Spin>
    </PageContainer>
  );
}
export default FenceMgr
